package myJs.user

import myJs.Utils.{dataDismiss, filterDataField, sortType}
import myJs.myPkg.jquery.$
import myJs.myPkg.{PlotlyConfigOptions, myPlotly}
import myJs.tool.Tool
import scalatags.Text.all._
import shared.Pojo.CurSeqData
import shared.plotly.element.Color.StringColor
import shared.plotly.element.ScatterMode.Lines
import shared.plotly.element.{AxisType, HoverInfo, Marker, ScatterMode}
import shared.plotly.layout.HoverMode.Closest
import shared.plotly.layout.{Axis, Font, Layout, Margin}
import shared.plotly.{Pie, Scatter}
import myJs.Implicits._
import myJs.user.SampleManage.{getFilterDataFieldName, headerMap}
import org.scalajs.dom.Element
import shared.VarTool

import scala.collection.SeqMap

/**
 * Created by yz on 3/6/2020
 */
trait SampleManageHtml {

  val checkWidth = 120

  def getAscLi = {
    li(`class` := "myLi hasHover", onclick := "SampleManage.execSort(this)",
      span(`class` := "sortFa",
        i(`class` := "fa fa-sort-alpha-asc")
      ),
      span("升序排序")
    )
  }

  def getDescLi = {
    li(`class` := "myLi hasHover", onclick := "SampleManage.execSort(this)",
      span(`class` := "sortFa",
        i(`class` := "fa fa-sort-alpha-desc")
      ),
      span("降序排序")
    )
  }

  def getFooter = {
    div(`class` := "modal-footer bg-info",
      button(`type` := "button", `class` := "btn btn-sm blue", onclick := "SampleManage.confirmFilter(this)",
        "确定"),
      button(`type` := "button", dataDismiss := "modal", `class` := "btn btn-default",
        onclick := "SampleManage.hideFilterContent(this)",
        "关闭")
    )
  }

  def initFilterContent = {

    val idContentHtml = div(id := "idContent", `class` := "menuContent filterContent", display := "none",
      filterDataField := "id", attr("label") := "样品编号",
      form(`class` := "form-horizontal myForm",
        ul(`class` := "myUl",
          getAscLi,
          getDescLi,
          li(`class` := "myDivider"),
          li(`class` := "myLi",
            div(marginBottom := 10,
              span(`class` := "fa fa-filter"),
              " 文本检索"
            ),
            div(`class` := "form-group",
              div(`class` := "col-sm-12",
                input(`type` := "text", `class` := "form-control filterInput valueInput textInput",
                  name := "id", width := "100%")
              )
            )
          ),
        )
      ),
      getFooter
    )

    val updateTimeContentHtml = div(id := "updateTimeContent", `class` := "menuContent filterContent",
      display := "none",
      filterDataField := "updateTime", attr("label") := "更新时间",
      form(`class` := "form-horizontal myForm",
        ul(`class` := "myUl",
          getAscLi,
          getDescLi,
          li(`class` := "myDivider"),
          li(`class` := "myLi",
            div(marginBottom := 10,
              span(`class` := "fa fa-filter"),
              " 日期检索"
            ),
            div(`class` := "form-group", marginBottom := 10,
              div(`class` := "col-sm-12",
                input(`type` := "text", `class` := "filterInput myDatepicker form-control startTime",
                  name := "startTime", width := "100%", placeholder := "起始", readonly)
              )
            ),
            div(`class` := "form-group",
              div(`class` := "col-sm-12",
                input(`type` := "text", `class` := "filterInput myDatepicker form-control endTime",
                  name := "endTime", width := "100%", placeholder := "终止", readonly)
              )
            ),
          ),
        )
      ),
      getFooter
    )

    case class FilterContentData(fieldName: String, label: String, values: List[String] = List[String]())

    val select2MultiDatas = List(
      FilterContentData("containerName", "板号", List.empty),
      FilterContentData("singleSource", "污染风险", List.empty),
      FilterContentData("interlocusBalance", "Interlocus Balance", List.empty),
      FilterContentData("autosomalLociTyped", "Autosomal Loci Typed", List.empty),
      FilterContentData("yLociTyped", "Y Loci Typed", List.empty),
      FilterContentData("xLociTyped", "X Loci Typed", List.empty),
      FilterContentData("isnpLociTyped", "iSNP Loci Typed", List.empty),
      FilterContentData("gender", "性别"),
      FilterContentData("panel", "panel"),
      FilterContentData("kind", "类型")
    )

    val select2MultiContentHtml = select2MultiDatas.map { x =>
      div(id := s"${x.fieldName}Content", `class` := "menuContent filterContent",
        display := "none",
        filterDataField := s"${x.fieldName}", attr("label") := x.label,
        form(`class` := "form-horizontal myForm",
          ul(`class` := "myUl",
            li(`class` := "myLi",
              div(marginBottom := 10,
                span(`class` := "fa fa-filter"),
                " 条件检索（可多选）"
              ),
              div(`class` := "form-group",
                div(`class` := "col-sm-12",
                  select(`type` := "text", `class` := "form-control filterInput select2MultiInput",
                    name := x.fieldName, width := "100%")
                )
              )
            ),
          )
        ),
        getFooter
      )
    }.mkString("&nbsp;")

    val select2SortDatas = List(
      FilterContentData("updateMission", "分析名称", List.empty),
    )

    val select2SortContentHtml = select2SortDatas.map { x =>
      div(id := s"${x.fieldName}Content", `class` := "menuContent filterContent",
        display := "none",
        filterDataField := s"${x.fieldName}", attr("label") := x.label,
        form(`class` := "form-horizontal myForm",
          ul(`class` := "myUl",
            getAscLi,
            getDescLi,
            li(`class` := "myDivider"),
            li(`class` := "myLi",
              div(marginBottom := 10,
                span(`class` := "fa fa-filter"),
                " 条件检索（可多选）"
              ),
              div(`class` := "form-group",
                div(`class` := "col-sm-12",
                  select(`type` := "text", `class` := "form-control filterInput select2MultiInput",
                    name := x.fieldName, width := "100%")
                )
              )
            ),
          )
        ),
        getFooter
      )
    }.mkString("&nbsp;")

    val textDatas = List(
      FilterContentData("sampleIntro", "项目"),
      FilterContentData("indexId", "index号"),
      FilterContentData("comment", "备注"),
    )

    val textContentHtml = textDatas.map { x =>
      div(id := s"${x.fieldName}Content", `class` := "menuContent filterContent", display := "none",
        filterDataField := s"${x.fieldName}", attr("label") := x.label,
        form(`class` := "form-horizontal myForm",
          ul(`class` := "myUl",
            li(`class` := "myLi",
              div(marginBottom := 10,
                span(`class` := "fa fa-filter"),
                " 文本检索"
              ),
              div(`class` := "form-group",
                div(`class` := "col-sm-12",
                  input(`type` := "text", `class` := "form-control filterInput valueInput textInput",
                    name := x.fieldName, width := "100%")
                )
              )
            ),
          )
        ),
        getFooter
      )
    }.mkString("&nbsp;")

    val contentHtml = List(idContentHtml,select2SortContentHtml, updateTimeContentHtml,
       textContentHtml, select2MultiContentHtml).mkString("&nbsp;")
    $("#allFilterContent").html(contentHtml)

  }

  def fillConditionHtml = {
    val startTime = Tool.getInputByName("startTime").`val`().toString
    val endTime = Tool.getInputByName("endTime").`val`().toString
    val trueStartTime = if (startTime.isEmpty) "无" else startTime
    val trueEndTime = if (endTime.isEmpty) "无" else endTime
    val updateTimeConditionHtml = if (startTime.isEmpty && endTime.isEmpty) {
      ""
    } else {
      span(`class` := "eachFCParent",
        span(`class` := "eachFilterCondition",
          span("更新时间"),
          s" ${trueStartTime} - ${trueEndTime}",
        ),
        sup(`class` := "mySup", onclick := "SampleManage.removeCondition(this)", filterDataField := "updateTime",
          i(`class` := "fa fa-times-circle")
        )
      ).render
    }

    val select2MultiTs = $(".select2MultiInput").mapElems { y =>
      val fieldName = $(y).attr("name").toString
      val columnName = $(y).parents(".filterContent").attr("label").toString
      (fieldName, columnName)
    }
    val select2MultiConditionHtml = select2MultiTs.map { case (fieldName, columnName) =>
      val curV = Tool.getInputByName(fieldName).myVal
      if (curV.isEmpty) {
        ""
      } else {
        span(`class` := "eachFCParent",
          span(`class` := "eachFilterCondition",
            span(s"${columnName} "),
            span(color := "red", "IN"),
            s" ${curV}",
          ),
          sup(`class` := "mySup", onclick := "SampleManage.removeCondition(this)", filterDataField := fieldName,
            i(`class` := "fa fa-times-circle")
          )
        ).render
      }
    }.mkString(" ")

    val selectTs = $(".selectInput").mapElems { y =>
      val fieldName = $(y).attr("name").toString
      val columnName = $(y).parents(".filterContent").attr("label").toString
      (fieldName, columnName)
    }
    val selectConditionHtml = selectTs.map { case (fieldName, columnName) =>
      val curV = Tool.getInputByName(fieldName).myVal
      if (curV.isEmpty) {
        ""
      } else {
        span(`class` := "eachFCParent",
          span(`class` := "eachFilterCondition",
            span(s"${columnName} "),
            span(color := "red", "等于"),
            s" ${curV}",
          ),
          sup(`class` := "mySup", onclick := "SampleManage.removeCondition(this)", filterDataField := fieldName,
            i(`class` := "fa fa-times-circle")
          )
        ).render
      }
    }.mkString(" ")

    val textTs = $(".textInput").mapElems { y =>
      val fieldName = $(y).attr("name").toString
      val columnName = $(y).parents(".filterContent").attr("label").toString
      (fieldName, columnName)
    }
    val textConditionHtml = textTs.map { case (fieldName, columnName) =>
      val curV = Tool.getInputByName(fieldName).myVal
      val orSpan=span(color:="#428CCB","or").render
      if (curV.isEmpty) {
        ""
      } else {
        span(`class` := "eachFCParent",
          span(`class` := "eachFilterCondition",
            span(s"${columnName} "),
            span(color := "red", "LIKE"),
            raw(s" ${curV.split("\\s+").mkString(s" ${orSpan} ")}"),
          ),
          sup(`class` := "mySup", onclick := "SampleManage.removeCondition(this)", filterDataField := fieldName,
            i(`class` := "fa fa-times-circle")
          )
        ).render

      }
    }.mkString(" ")

    val conditionHtml = List(updateTimeConditionHtml, selectConditionHtml,
      textConditionHtml, select2MultiConditionHtml).mkString(" ")
    if (conditionHtml.trim.isEmpty) {
      $("#filterCondition").html("")
      $("#filterCondition").parent().hide()
    } else {
      $("#filterCondition").html(conditionHtml)
      $("#filterCondition").parent().show()
    }

  }

  def fillSortHtml(y: Element) = {
    val iJq = $(y).find("i")
    val isAsc = !iJq.hasClass("fa-sort-alpha-desc")
    val sortTypeStr = if (isAsc) {
      "asc"
    } else "desc"
    val orderHtml = if (isAsc) {
      span(color := "red", "升序")
    } else span(color := "blue", "降序")
    val filterContentJq = $(y).parents(".filterContent")
    val label = filterContentJq.attr("label").toString
    val fieldName = Tool.getFilterDataFieldName(filterContentJq)
    val conditionHtml = span(`class` := "eachFCParent",
      filterDataField := fieldName, sortType := sortTypeStr,
      span(`class` := "eachFilterCondition",
        span(s"${label} , "),
        orderHtml,
      ),
      sup(`class` := "mySup sortSub", onclick := "SampleManage.removeSort(this)",
        i(`class` := "fa fa-times-circle")
      )
    ).render
    $("#sortCondition").html(conditionHtml)
    $("#sortCondition").parent().show()

  }

  def produceAutoStrSiteView = {
    val siteNames = VarTool.autoSiteNames
    val html = siteNames.zipWithIndex.map { case (vsName, i) =>
      label(
        marginRight := 15,
        width := checkWidth,
        cls := "myCheckbox"
      )(input(`class` := "autoStr",
        `type` := "checkbox",
        name := "columNames[]",
        value := vsName,
      )(vsName)
      )
    }.mkString
    $("#autoStrSite").empty().html(html)
  }

  def refreshBasicInfoView = {
    val columnNames = VarTool.basicColumnNames
    val html = columnNames.zipWithIndex.map { case (vsName, i) =>
      val showV = headerMap.getOrElse(vsName, vsName)
      label(
        marginRight := 30,
        //        width := checkWidth,
        cls := "myCheckbox"
      )(input(
        `class` := "basicInfo",
        `type` := "checkbox",
        name := "columNames[]",
        value := vsName,
        showV
      )
      )
    }.mkString
    $("#basicInfo").empty().html(html)
  }


}
